<template>
  <view>
    <view class="content">
      <view class="order-item">
        <view class="number">订单编号: {{ order_detail.trade_no }}</view>
        <view class="flex"
              @click="handleToArticle(order_detail.order && order_detail.order.article && order_detail.order.article.type, order_detail.order && order_detail.order.article_id, order_detail.order && order_detail.order.id)">
          <view style="margin-top: 20upx;">
            <image style="width: 286upx;height: 198upx;" :src="order_detail.order && order_detail.order.cover_img"
                   mode="aspectFill"></image>
          </view>
          <view style="margin: 36upx 0 0 18upx;">
            <view class="title">{{ order_detail.order && order_detail.order.name }}</view>
            <text class="type">{{ order_detail.category }}</text>
            <view style="margin-top: 32upx;font-size: 30upx;color: rgba(229,39,24,1);">
              ￥{{ order_detail.order && order_detail.order.sale_price }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 10upx;background-color: rgba(248,248,248,1);"></view>
    <view class="flex align-center justify-between" style="padding: 26upx 20upx 20upx 20upx;">
      <view class="assess-title">互动评论</view>
      <view class="flex align-center">
        <text style="font-size: 26upx;color: rgba(153,153,153,1); margin-right: 10upx;">评分:</text>
        <uni-rate v-model="score" color="#FF9288" activeColor="#FF9288" :size="18" :margin="4"
                  @change="handleChangeRate"/>
      </view>
    </view>
    <view style="padding: 20upx 22upx;">
      <textarea class="assess-text" v-model="content_html" maxlength="200" placeholder="请输入评价内容，字数限制200字"/>
    </view>
    <view class="flex flex-wrap" style="width: 100%;">
      <view v-for="(item, index) in publish_imgs" :key="index"
            style="position: relative;padding-top: 20upx;padding-left: 24upx;">
        <image style="width: 200upx;height: 200upx; border-radius: 4upx;" :src="item" mode="aspectFill"></image>
        <image class="box-kong" @click="handleDeleteCoverMap(index)" src="/static/icon/comments/shanchu@2x.png"
               mode=""></image>
      </view>
      <view @click="handleAddCoverMap" v-if="publish_imgs.length < 5"
            style="height: 182upx;padding-top: 20upx;padding-left: 24upx;">
        <image style="width: 200upx;height: 200upx;" src="/static/image/add_imgs4@2x.png" mode=""></image>
      </view>
    </view>
    <view class="publish flex align-center justify-center" @click="handlePublish(order_detail.order.id, order_detail.f_table)">发布</view>
  </view>
</template>

<script>
import {orders_getById} from "api/my/my"
import {evaluate_giveEvaluate} from "api/comment/comment"
import {chooseImage, getQiniuToken, test_authority} from "utils/wxUtil"

export default {
  data() {
    return {
      tab_list: ['待支付', '已完成'], //分类栏
      tab_index: 0, //tab栏点击索引值
      order_detail: {}, //已完成订单
      content_html: '', //评论字段
      cover_map: '/static/image/pingluntu.png', //封面图路径
      score: 0, //评分
      publish_imgs: [], //发布评论图
      orders_id: '',//订单id
    }
  },
  methods: {
    //初始化
    pageInit(orders_id) {
      orders_getById({orders_id}).then(res => {
        console.log(res)
        this.order_detail = res.data.orders;
      })
    },
    //去商品详情
    handleToArticle(type, article_id, product_id) {
      if(type){
        switch (type) {
          case 'article_product':
            this.$uniNavigateTo({
              url: '/pages/passBand/commodityDetail/commodityDetail',
              query: {
                product_id
              }
            })
            break;
          case 'product':
            this.$uniNavigateTo({
              url: '/pages/passBand/otherDetail/otherDetail',
              query: {
                article_id
              }
            })
            break;
        }
      }else {
        this.$uniNavigateTo({
          url: '/pages/tutorials/articleDetail/articleDetail',
          query: {
            course_id: product_id
          }
        })
      }
    },
    //评星
    handleChangeRate(e) {
      this.score = e.value;
    },
    //添加图片
    handleAddCoverMap() {
      let count = 5 - this.publish_imgs.length
      chooseImage(count).then(res => {
        let upload_imgs = res.image_array;
        this.publish_imgs = this.publish_imgs.concat(upload_imgs);
      })
    },
    /**
     * @name 删除封面图
     */
    handleDeleteCoverMap(index) {
      this.publish_imgs.splice(index, 1)
    },
    //发布
    handlePublish(f_id, f_table) {
      if(!this.score){
        uni.showToast({
          title: '请评分',
          icon: 'none'
        })
        return;
      }
      let imgs = this.publish_imgs.join(',')
      let data = {
        f_table: f_table,
        f_id: f_id,
        score: this.score,
        content_html: this.content_html,
        imgs: imgs,
        evaluate_id: '',
      }
      evaluate_giveEvaluate(data).then(res => {
        uni.showToast({
          title: '评价成功',
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          });
        }, 500)
      }).catch(err=>{
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
      })
    },
  },
  onLoad(e) {
    this.orders_id = e.orders_id;
    getQiniuToken()
    this.pageInit(e.orders_id);
  },
}
</script>

<style scoped lang="scss">
.content {
  background-color: rgba(248, 248, 248, 1);
}

.order-item {
  background-color: #FFFFFF;
  border-radius: 10upx;
  padding: 0upx 18upx 20upx 22upx;
}

.number {
  padding: 20upx 0;
  font-size: 24upx;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 30upx;
  font-weight: 700;
  margin-bottom: 24upx;
}

.type {
  padding: 4upx 16upx;
  background-color: rgba(255, 233, 231, 1);
  border-radius: 4upx;
  font-size: 22upx;
  color: rgba(241, 93, 80, 1);
}

.assess-title {
  padding-left: 10upx;
  font-size: 26upx;
  font-weight: 700;
  border-left: 6upx solid rgba(229, 39, 24, 1);
}

.star {
  width: 35upx;
  height: 35upx;
  margin-left: 9upx;
}

.assess-text {
  font-size: 24upx;
  padding: 18upx 20upx;
  width: 100%;
  height: 372upx;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.box-kong {
  width: 28upx;
  height: 28upx;
  border-radius: 50%;
  position: absolute;
  top: 5upx;
  right: -10upx;
}

.map-box {
  width: 200upx;
  height: 200upx;
  background-color: rgba(248, 248, 248, 1);
  border-radius: 4upx;
  margin-right: 10upx;
}

.cover-map {
  padding: 0upx 0 0upx 22upx;
}

.publish {
  width: 100%;
  height: 98upx;
  background-color: rgba(229, 39, 24, 1);
  color: #FFFFFF;
  font-size: 28upx;
  position: fixed;
  bottom: 0;
}
</style>
